<template>
	<view>
		<view class="expert-list">
			<block v-for="(item,index) in expertList" :key="index" >
				<view @click="toDetail(item,index)" class="expert-item" :class="opcity==index?'sysOpacity':''">
					<view>
						<image class="expert-item-pic" :src="item.headPortrait" mode="aspectFill"></image>
					</view>
					<view class="expert-item-info">
						<view class="expert-item-info-self">
							<text class="expert-item-info-self-name">{{item.userInfo.realName}}</text>
							
							<!-- <text class="expert-item-info-self-icon"> -->
								<!-- <text class="icon iconfont iconvip"></text> -->
								<view class="vip_contain" v-if="item.topState==1">
									<image style="width: 19upx;height: 17upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/zuanshi.jpg" mode="scaleToFill"></image>
									<text class="expert-item-info-self-icon-text">特邀</text>
								</view>
								
							<!-- </text> -->
						</view>
						<view class="expert-item-info-com oneline">
							<!-- {{item.userInfo.workUnit || '中国科学院上海生命研究院'}} -->
							{{item.jobTitle}}
						</view>
						<view class="expert-item-info-research">
							<view class="">
								研究方向：
							</view> 
							 <view class="tip" v-for="(i,index) in item.research" :key='index'>{{i}}</view>
						</view>
						<view class="expert-bottom">
							<view class="session-5">
								<view class="sess-1" v-if="item.picTxtItem">
									<text>图文</text>
									<text>¥{{item.picTxtItem.price}}</text>
								</view>
								<view class="sess-2" v-if="item.phoneItem">
									<text>电话</text>
									<text>¥{{item.phoneItem.price}}&thinsp;起</text>
								</view>
								<view class="sess-3">
									<text>问专家</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="index<expertList.length-1" class="project-seprate"></view>
			</block>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:['expertList'],
		data() {
			return {
				constUrl:this.$baseUrl,
				opcity: -1
			}
		},
		
		methods: {
			toDetail(item,index) {
				this.opcity = index
				uni.navigateTo({
				    url: '/pages/expert-detail/expert-detail?scene='+item.expertId //和pc端二维码参数统一
				});
			},
			resetOpcity(){
				let that = this
				setTimeout(function(){
					that.opcity = -1
				},1000)
			}
		},
	}
</script>

<style scoped>
	view{
		line-height: normal;
	}
	.expert-item{
		display: flex;
		padding: 30upx 0upx 30upx 30upx;
	}
	.expert-item-pic{
		width: 105upx;
		height: 105upx;
		object-fit: cover;
		border-radius: 50%;
		/* border: 1px solid #007AFF; */
		margin-right: 30upx;
		flex-shrink: 0;
		background-color: #E1E1E1;
	}
	.expert-item-info{
		/* display: flex; */
		flex: 1;
	}
	.expert-item-info-self{
		display: flex;
		align-items: center;
	}
	.expert-item-info-self-name{
		font-size:30upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:bold;
		margin-right: 16upx;
		color: #333333;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		max-width: 400upx;
	}
	.expert-item-info-self-head{
		font-size:24upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(34,34,34,1);
		margin-right: 6upx;
		max-width: 190upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.vip_contain{
		width: 80upx;
		height: 26upx;
		background-color: #FFEDBB;
		border-radius: 17upx;
		display: flex;
		align-items: center;
		padding: 4upx 5upx;
		margin-left: 4upx;
		justify-content: center;
	}
	.expert-item-info-self-icon{
		background-color: #FFEDBB;
		border-radius: 17upx;
		font-size:19upx;
		/* color: #F7B500; */
		width: 80upx;
		/* display: flex; */
		height: 26upx;
		/* padding: 6upx 10upx; */
		/* align-items: center; */
	}
	.expert-item-info-self-icon>.icon{
		vertical-align: middle;
	}
	.expert-item-info-self-icon-text{
		font-size:18upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		margin-left: 4upx;
		color:rgba(182,137,14,1);
	}
	.expert-item-info-com{
		font-size:24upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:#494949;
		width: 540upx;
		margin: 18upx 0 28upx;
	}
	.expert-item-info-research{
		font-size:24upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		width: 540upx;
		color:rgba(160,160,160,1);
		margin-bottom:20upx ;
		overflow: hidden;
		line-height: 40upx;
		height: 40upx;
		overflow: hidden;
	}
	.expert-item-info-research view{
		display: inline-block;
		font-size: 24upx;

		
		height: 36upx;
		line-height: 36upx;
		color: #888;
		
		background-color: #fff;
		
		overflow: hidden;
		white-space: nowrap;
	}
	.expert-item-info-research view.tip{
		color: #547AAC;
		margin-right: 14upx;
		background-color: #E9F1FF;
				padding: 0 15upx;
		overflow: hidden;
		white-space: nowrap;
	}
	.oneline{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.project-seprate{
		width: 100%;
		height: 12upx;
		background:rgba(245,245,245,1);
	}
	.expert-bottom{
		border-top:1upx solid #F1F1F1
	}
	.session-5 {
	  display: flex;
	}
	.session-5 > view text:nth-child(1) {
	  color: #616161;
	  font-size: 28upx;
	  font-weight: bold;
	  margin-right: 8upx;
	}
	.session-5 > view text:nth-child(2) {
	  color: #DE5A02;
	  font-size: 28upx;
	  font-weight: bold;
	}
	.session-5 .sess-1 {
	  margin-right: 38upx;
	  margin-top: 20upx;
	  height: 50upx;
	  line-height: 50upx;
	}
	.session-5 .sess-2 {
	  margin-top: 20upx;
	  height: 50upx;
	  line-height: 50upx;
	}
	.session-5 .sess-3 {
	  flex: 1;
	  text-align: right;
	  margin-top: 20upx;
	}
	.session-5 .sess-3 text {
	  display: inline-block;
	  color: #2A7DFA !important;
	  width: 104upx;
	  height: 50upx;
	  line-height: 50upx;
	  border-radius:24upx;
	  /* background: #f3f7ff; */
	  border: 1upx solid #2A7DFA;
	  border-radius: 24upx;
	  text-align: center;
	  font-size: 24upx !important;
	  margin-right: 32upx !important;
	}
</style>